import React, { useMemo } from 'react';
import { Drawer } from 'antd';
import styled from 'styled-components';
import styles from '../styles.module.css'
import { useSelector } from 'react-redux';
import { RootState } from '../../store';
import classNames from 'classnames';
import Icon from '../Icon';
import Space from '../Space';

export type Action = {
    key: string;
    label: string | React.ReactNode,
    disable?: boolean;
    onClick?: (key: string) => void,
}

export type IconType = {
    icon?: boolean | React.ReactNode;
    count?: string;
}

type IconsInfo = Array<IconType>

export interface Props {
    upgrade?: {
        text?: string;
        tips?: string;
        icons?: IconsInfo
    }
    title?: React.ReactNode;
    content?: React.ReactNode;
    confirm?: Action;
    show?: boolean;
    closable?: boolean | React.ReactNode;
    onClose?: () => void
}

const SHEET_ITEM_HEIGHT = 40; // unit px
const SHEET_SPACE = 11;

const Container = styled(Drawer)`
    overflow: hidden;
    border-radius: .625rem .625rem 0px 0px;
    .modal {
        background-color: #011A38 ;
        display: flex;
        flex-direction: column;
    }
`
const Close = styled.div`
    position: absolute;
    padding: 1rem;
    box-sizing: border-box;
    right: 0;
`

const Title = styled.div`
    font-size: 18px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3.9375rem;
    font-weight: bold;
    width: 100%;
`

const Content = styled.div`
    display: flex;
    flex-direction: column;
    flex: 1;
`

const Upgrade = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: .875rem 0;
    box-sizing: border-box;
    flex: 1;
`

const Text = styled.div`
    font-size: .875rem;
    font-weight: bold;
    white-space: pre-line;
    text-align: center;
    color: ${(prop) => prop.theme.text.coin};
`

const Tips = styled.div`
    font-weight: bold;
    font-size: .875rem;
    color: ${(prop) => prop.theme.text.normal};
    margin-top: .625rem;
`

const Count = styled.div<{ $marginTop?: string | number }>`
    display: flex;
    justify-items: center;
    align-items: center;
    margin-top: ${({ $marginTop }) => $marginTop};
    .count {
        padding: 0 .5rem;
        box-sizing: border-box;
        font-weight: bold;
        font-size: 1.125rem;
        color: #FEA327;
    }
`

const Item = styled.div<{ $last?: number, $disable?: number }>`
    height: ${SHEET_ITEM_HEIGHT}px;
    border-bottom: ${({ $last }) => $last ? 'none' : '1px solid #f3f3f3'};
    box-sizing: border-box;
    display: flex;
    background-color: ${({ $disable }) => $disable ? '#32465E' : '#01BFBF'};;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #fff;
    margin: 0 1rem .5rem;
    border-radius: .625rem;
`

const Confirm = styled.div`
    
`

const SafeAreaBottom = styled.div<{ height: string }>`
    height: ${({ height }) => height};
`

const Sheet: React.FC<Props> = ({ title, confirm, show, onClose, content, upgrade, closable = false }) => {
    const safeArea = useSelector((state: RootState) => state.safeArea)
    const height = useMemo(() => upgrade?.icons ? `${(upgrade?.icons.length - 1) * 3.0 + 18.125}rem` : '18.125rem', [upgrade?.icons]) //1.5
    return <Container
        height={height}
        classNames={{ body: classNames(styles.sheet_body, 'modal') }}
        placement="bottom"
        closable={false}
        open={show}
        onClose={onClose}
        key="bottom"
    >
        {closable ? (
            <Close onClick={onClose}> {typeof closable === 'boolean' ?
                <Icon
                    name='icon_close'
                    width='.625rem'
                />
                :
                closable}
            </Close>) : undefined}
        {title && <Title>{title}</Title>}
        <Content>
            {upgrade ? <Upgrade>
                <Text>
                    {upgrade.text}
                </Text>
                <Tips>
                    {upgrade.tips}
                </Tips>
                {(upgrade.text || upgrade.tips) && <Space
                    minHeight='20px'
                    width='100%'
                />}
                {upgrade.icons?.map((item, idx) => <>
                    {item.count && <Count
                        key={idx}
                        $marginTop={idx != 0 ? '0.5rem' : 0}
                    >
                        {typeof item.icon === 'boolean' ? <Icon
                            name='icon_coin'
                            width='1.5rem'
                        /> : item.icon}
                        <span className='count'>{item.count}</span>
                    </Count>}
                </>)}

            </Upgrade> : content}
        </Content>
        {confirm &&
            <Item
                $disable={confirm.disable ? 1 : 0}
                style={{ marginTop: `${SHEET_SPACE}px` }}
                $last={1}
                onClick={() => confirm.onClick?.(confirm.key)}
            >{
                    typeof confirm.label === 'string' ?
                        <Confirm>{confirm.label}</Confirm> :
                        confirm.label
                }</Item>}
        <SafeAreaBottom height={safeArea.bottom} />
    </Container>
}

export default Sheet;